<template>
  <div class="info">
    <p class="price">
      <span id="retailPrice">{{ '¥' + info.retailPrice }}</span>
      <span id="counterPrice">{{ '¥' + info.counterPrice.toFixed(2) }}</span>
    </p>
    <p>{{ info.name }}</p>
    <p id="brief">{{ info.brief }}</p>
  </div>
</template>

<script setup>
let props = defineProps(['info'])
// console.log(props)
</script>
 
<style scoped>
.info {
  width: 100%;
  background-color: white;
}
P {
  width: 90%;
  margin: 0 auto;
  padding: 5px 0;
}
.price {
  display: flex;
  align-items: end;
  gap: 10px;
}
#retailPrice {
  font-size: 18px;
  color: red;
}
#counterPrice {
  font-size: 10px;
  text-decoration: line-through;
  color: rgb(175, 175, 175);
}
#brief {
  font-size: 12px;
  color: rgb(155, 154, 154);
}
</style>
